<template>
  <div class="div">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>意见管理</el-breadcrumb-item>
      <el-breadcrumb-item>意见发表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20">
      <el-col>
        <el-steps :active="1">
          <el-step title="添加意见主题" description="欢迎踊跃指出我们的不足之处."></el-step>
          <el-step title="添加意见内容" description="你的一次小小的指正,都将是我们莫大的进步."></el-step>
          <el-step title="发表意见" description="感谢你的意见,欢迎再次指正."></el-step>
        </el-steps>

        <el-col class="margintop20">
          <div v-show="active==1" style="width:30%">
            <el-form
              :model="form"
              :rules="rules"
              ref="myform"
              label-width="100px"
              label-position="top"
              class="myform"
            >
              <el-form-item label="意见标题" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="意见分类" prop="category">
                <el-cascader
                  style="width:100%"
                  v-model="form.category"
                  :options="options"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-form>

            <el-button type="primary" @click="gotonextone">下一步</el-button>
          </div>
          <div v-show="active==2">
            <div>
                <quill-editor
                v-model="form.content"
                ref="advisecontent"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
                ></quill-editor>
            </div>
            <div class="margintop20" >
              <el-button type="danger" @click="active--">上一步</el-button>
              <el-button type="primary" @click="gotonext">下一步</el-button>
            </div>
          </div>
          <div v-show="active==3">
            <el-button type="danger" @click="active--">上一步</el-button>
            <el-button type="success" @click="addtosome">发表意见</el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { advacecatetory } from "@/utils";
import {addadvise} from "@/api"
export default {
  data() {
    return {
      active: 1,
      form: {},
      rules: {
        title: [
          { required: true, message: "请输入意见标题..", trigger: "blur" },
        ],
        category: [
          { required: true, message: "请输入意见分类..", trigger: "change" },
        ],
      },
      options: advacecatetory,
      editorOption: { theme: "snow" },
    };
  },
  methods: {
    handleChange() {},
    gotonextone() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          this.$message.error("请完善所有信息再操作..");
          return false;
        }
      });
    },
    onEditorBlur() {},
    onEditorFocus() {},
    onEditorChange() {},
    gotonext() {
      console.log(this.form);
      if(this.form.content){
          this.active++
      }else{
          this.$message.error('请完善建议内容...')
          return false
      }
    },
    addtosome() {
        addadvise(this.form)
        .then(res=>{
            if(res.type){
                this.$router.push({name:'adviselist'})
            }
        })
    },
  },
};
</script>


<style lang="scss">
.ql-editor {
  height: 250px;
}
.margintop20 {
  width: 100%;
}

.el-step__title.is-finish {
  color: darkorange;
}
.el-step__description.is-finish {
  color: darkorange;
}
.quill-editor {
  background: rgba(242, 247, 246, 0.7);
  color: darkorange;
}
.ql-container.ql-snow {
  border: none;
}
.ql-toolbar.ql-snow {
  border: none;
}


</style>